<template>
  <view class="box-card-body">
    <view id="detailUserChart" class="chart"></view>
  </view>
</template>

<script>
var vk = uni.vk;
import * as echarts from "echarts";

export default {
  name: "detailUserChart",
  methods: {
    async init(time) {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.detailUserChart",
		title:'数据加载中',
        data: { time },
      });
      let xList = [];
      let yList = [];
      let yList2 = [];
      let yList3 = [];
      let yList4 = [];

      res.list.forEach((item) => {
        xList.push(item.text);
        yList.push(item.value);
      });
      res.list2.forEach((item) => {
        yList2.push(item.value);
      });
      res.list3.forEach((item) => {
        yList3.push(item.value);
      });
      res.list4.forEach((item) => {
        yList4.push(item.value);
      });
      // 渲染图表
      let myChart = echarts.getInstanceByDom(
        document.getElementById("detailUserChart")
      );
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById("detailUserChart"));
      }

      let orderNumName = "新增用户数";

      let goodsname = "访客数";
      //销售额
      let salesNmme = "成交用户数";

      //利润
      let poriName = "新增会员数";

      let option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [orderNumName, goodsname, salesNmme, poriName],
        },
        backgroundColor: "#ffffff",
        grid: {
          left: "1%",
          right: "1%",
          top: "15%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: { trigger: "axis" },
        xAxis: [
          {
            type: "category",
            axisLabel: { color: "#9a9a9a", interval: 0, rotate: 40 },
            axisLine: { show: true, lineStyle: { color: "#397cbc" } },
            axisTick: { show: false },
            data: xList,
          },
        ],
        yAxis: [
          {
            name: `数量`,
            type: "value",
            // axisLine: { show: true, lineStyle: { color: "#dfdfdf" } },
            axisTick: { show: false },
            splitLine: {
              show: true,
              lineStyle: { type: "dashed", color: "#f4f4f4" },
            },
          },
        ],
        series: [
          {
            name: orderNumName,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#1890ff",
            },
            // markPoint: { itemStyle: { normal: { color: "red" } } },
            data: yList,
          },
          {
            name: goodsname,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#00c050",
            },
            // markPoint: { itemStyle: { normal: { color: "red" } } },
            data: yList2,
          },

          {
            name: salesNmme,
            type: "line",
            data: yList3,
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#ffab2b",
            },
            markPoint: { itemStyle: { normal: { color: "red" } } },
          },
          {
            name: poriName,
            type: "line",
            barMaxWidth: 40,
            data: yList4,
			smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#b37feb",
            },
          },
        ],
      };
      myChart.setOption(option);
      this.$emit("comp");
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card-body {
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  margin-bottom: 20px;
  padding: 14px 0 20px;
  height: 360px;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
